<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Amaze UI| examples grid</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="/css/amui.all.min.css"/>
  <style>
    .header {
      margin: 40px 0 20px 0;
      padding-bottom: 10px;
      text-align: center;
      border-bottom: 1px dashed rgba(0,0,0,.2);
    }
    .grid-title {
      padding: 10px 0;
      border-top: 1px solid rgba(0,0,0,.2);
      border-bottom: 1px dashed rgba(0,0,0,.2);
    }
    .grid-title-letter {
      padding-left: 15px;
    }
    .grid-list {
      margin-top: 20px;
    }

  </style>
</head>
<body>
<div class="am-g">
  <header class="col-sm-12 header">
    Amaze UI 托管于 <a href=""><i class="am-icon-github"></i>Github</a>
  </header>
</div>

<div class="am-g">
  <div class="col-md-3">
    小萌是云适配的吉祥物，卖得了萌，耍得了二，是Amaze UI landing page的飞天使者。
  </div>
  <div class="col-md-9">
    <img src="/i/landing/mascot.png" alt="xiaomeng"/>
    <div class="am-g">
      <div class="col-md-6">
        <p>英国短毛猫有悠久的历史，但直到20世纪初才引起人们的宠爱。该猫体形圆胖，外型 由中型至大型。其骨架及肌肉很发达，短而肥的颈与及阔而平的肩膊相配合。头部圆而阔， 体粗短发达，被毛短而密，头大脸圆，大而圆的眼睛根据被毛不同而呈现各种颜色。最大的特征是支耳的距离很接近身。该猫温柔平静，对人友善，很容易饲养。</p>
      </div>
      <div class="col-md-6">
        <h2 class="grid-title-letter">小萌是什么猫</h2>
        <ul>
          <li>学名：英国短毛猫</li>
          <li>毛质：短而密的绒毛，富有弹性，可将全身紧密地包。</li>
          <li>眼睛：圆而大，颜色以毛色为准。</li>
          <li>特征：头部又宽又圆，双耳间距较小。</li>
          <li>性格：大胆好奇，温柔</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="am-g">
  <div class="col-sm-12">
    <h1 class="grid-title">简介</h1>
  </div>
  <div class="col-sm-12">
    <div class="am-g grid-list">
      <div class="col-lg-3 col-md-6 col-sm-12">
        <h3>缘由</h3>
        <p>到了19世纪的末期，英国的育种专家们在这些土著猫中选出最美丽的猫咪，开始了漫长的培育工作，最终这个被称为英国短毛猫的品种诞生了。</p>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-12">
        <h3>发展</h3>
        <p>1901年，英国猫俱乐部成立了，那时的英国短毛猫还是体型大而结实的蓝色毛种，很像法国的卡尔特猫，后来由于它们的后代越来越像，甚至不分彼此。</p>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-12">
        <h3>伴侣</h3>
        <p>第二次世界大战之后，即1945年后，更多毛色的英国短毛猫也陆续被各国的猫会所承认，它们走进了千家万户，成为人们生活中的伴侣。</p>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-12">
        <h3>后来</h3>
        <p>1970年后，他们的体型越来越小，毛色的种类也越来越丰富，所有的风格都开始朝优雅变化。到了1977年，FIFE又重新更改了规定，将这两个品种分离。</p>
      </div>
    </div>
  </div>
  <div class="col-sm-12">
    <div class="am-g">
      <div class="col-md-6">
        <img src="http://img.hb.aicdn.com/51adb3195fc1eb8ddd9e860274532c82f721f2c3f41f-uFEee2_fw658"/>
        <p>
          英国短毛猫大胆好奇，但非常温柔，适应能力也很强，不会因为环境的改变而改变，也不会乱发脾气、更不会乱吵乱叫，它只会尽量爬到比较高的地方，低着头瞪着那双圆圆的大眼睛面带微笑地俯视着你。
        </p>
      </div>
      <div class="col-md-6">
        <img src="http://img.hb.aicdn.com/51adb3195fc1eb8ddd9e860274532c82f721f2c3f41f-uFEee2_fw658"/>
        <p>
          就好像《爱丽丝梦游仙境》中提到的那只叫做“路易斯”的猫一样，不用语言，只用那可爱的面部表情就抓住了你的心，再也无法改变你对它的爱。
        </p>
      </div>
    </div>
  </div>

  <div class="col-sm-12">
    <ul class="sm-block-grid-1 md-block-grid-3">
      <li>
        <img src="http://img.hb.aicdn.com/51adb3195fc1eb8ddd9e860274532c82f721f2c3f41f-uFEee2_fw658"/>
        <h4>短毛猫</h4>
        <p>英国短毛猫大胆好奇，但非常温柔，适应能力也很强，不会因为环境的改变而改变，也不会乱发脾气、更不会乱吵乱叫，它只会尽量爬到比较高的地方，低着头瞪着那双圆圆的大眼睛面带微笑地俯视着你。</p>
      </li>
      <li>
        <img src="http://img.hb.aicdn.com/51adb3195fc1eb8ddd9e860274532c82f721f2c3f41f-uFEee2_fw658"/>
        <h4>短毛猫</h4>
        <p>英国短毛猫大胆好奇，但非常温柔，适应能力也很强，不会因为环境的改变而改变，也不会乱发脾气、更不会乱吵乱叫，它只会尽量爬到比较高的地方，低着头瞪着那双圆圆的大眼睛面带微笑地俯视着你。</p>
      </li>
      <li>
        <img src="http://img.hb.aicdn.com/51adb3195fc1eb8ddd9e860274532c82f721f2c3f41f-uFEee2_fw658"/>
        <h4>短毛猫</h4>
        <p>英国短毛猫大胆好奇，但非常温柔，适应能力也很强，不会因为环境的改变而改变，也不会乱发脾气、更不会乱吵乱叫，它只会尽量爬到比较高的地方，低着头瞪着那双圆圆的大眼睛面带微笑地俯视着你。</p>
      </li>
    </ul>
  </div>
</div>
<div class="am-g">
  <div class="col-sm-12">
    <header class="grid-title">生活习性</header>
    <div class="am-g">
      <div class="">

      </div>
    </div>
  </div>
</div>
</body>
</html>